<template>
  <div class="g-rowb1">
    <div class="g-topb1">
      <div class="ll">
        <div class="g-titb1">
          <div class="h3">设置中心</div>
        </div>
        <div class="m-topb1">
          <router-link to="personManagement" class="tab">
            人员管理
          </router-link>
          <div class="tab on">养殖场管理</div>
        </div>
      </div>
      <div class="rr">
        <router-link to="/" class="g-btnb1">
          <img src="@img/b-i1.png" alt="" class="icn" />
          <span>返回首页</span>
        </router-link>
      </div>
      <img src="@img/b-line1.png" alt="" class="line" />
    </div>

    <div class="g-content sty1">
      <div class="g-fillter">
        <div class="item">
          <div class="s">养殖场</div>
          <input type="text" class="inp" placeholder="请输入" />
        </div>
        <div class="item">
          <div class="s">联系人</div>
          <input type="text" class="inp" placeholder="请输入" />
        </div>
        <div class="opts">
          <div class="btn">
            <img src="@img/c-btn2.svg" alt="" />
          </div>
          <div class="btn"><img src="@img/c-btn3.svg" alt="" /></div>
        </div>
      </div>
      <div class="flex1">
        <ul class="ul-listb1">
          <li v-for="index in [0,1,2,3,4,5,6,7]" :key="index">
            <div class="con">
              <div class="top">
                <div class="ll">
                  <div class="tit">东风科技养殖场</div>
                  <div class="tag">显示</div>
                </div>
                <router-link to="/baseInfo" class="rr">详情</router-link>
              </div>
              <div class="info">
                <div class="item name">张峰仁</div>
                <div class="item tel">13012345678</div>
              </div>
              <div class="pics">
                <div class="pic">
                  <div
                    class="img"
                    :style="
                      'background-image:url(' + getImageUrl('c-j1.jpg') + ')'
                    "
                  ></div>
                </div>
                <div class="pic">
                  <div
                    class="img"
                    :style="
                      'background-image:url(' + getImageUrl('c-j1.jpg') + ')'
                    "
                  ></div>
                </div>
                <div class="pic">
                  <div
                    class="img"
                    :style="
                      'background-image:url(' + getImageUrl('c-j1.jpg') + ')'
                    "
                  ></div>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="con-bot">
        <div class="l">
          <div class="add"><span>+</span>新建/编辑</div>
        </div>
        <div class="r">
          <div class="g-pages">
            <a-pagination
              v-model:current="current"
              v-model:page-size="pageSize"
              :total="85"
              showQuickJumper
              :show-total="
                (total, range) =>
                  `显示${range[0]}到${range[1]} ,共 ${total} 条记录`
              "
            ></a-pagination>
          </div>
        </div>
      </div>
    </div>

    <div class="c"></div>
  </div>
</template>

<script setup>
import { reactive, ref, onMounted } from 'vue';

import $ from 'jquery';

function getImageUrl (name) {
  return new URL(`../../assets/images/${name}`, import.meta.url).href;
}
const actIdx = ref(0);

const current = ref(2);
const pageSize = ref(8);



onMounted(() => {
  // 获取数据后执行
  $('.ul-listb1').on('click','.tag', function () {
    var txt = $(this).text();
    $(this).toggleClass('hide');
    if(txt == '显示'){
      $(this).text('隐藏');
    }else{
      $(this).text('显示');
    }
  });
});

</script>

<style>
</style>